import React, { Component } from 'react'
import './index.css'
import {Carousel} from 'antd'
import teacher from '../static/teacher.png'
import spring from './picture/spring.jpg'
import autumn from './picture/autumn.jpg'
import Tab from '../ui-components/Tab/index'
import Todos from '../Todos/index'
import Footer from '../ui-components/Footer/index'
import Header from '../ui-components/Header/index'
import axios from 'axios'
import ObjectMap from '../common/ObjectMap'

//负责遍历对象后渲染
class Data extends React.Component {
  render() {
      return (
          ObjectMap.call(this.props.artical,(data2, i) => {
          return (
              <div key={i} className="cpo-sub">
                  <div style={{color:'rgb(27, 224, 238)'}}>Your Title：{data2.title}</div>
                  <br />
                  <div dangerouslySetInnerHTML={{__html:data2.content}} ></div>
              </div>
          )
          }))
  }
}

export default class index extends Component {
  state = {
  index: 0,
  artical:[]
  }
//从服务器端取数据
  componentDidMount(){
    const that = this
    axios.get(`/api1/data1`)
    .then(function(response){
        that.setState({artical:response.data})
        //console.log('成功了',response.data)
    })
    .catch(function(error){
        that.setState({error:error})
        console.log('失败了',error)
    })
}
  onClick = (index) => {
    this.setState({ index })
  }
  confirm = (i) => {
    switch(i){
      case 0:
        this.props.history.push('/diss')
        break
      case 1:
        this.props.history.push('/navigation')
        break
      case 2:
        this.props.history.push('/book')
        break
      case 3:
        this.props.history.push('/member')
        break
      default:
        break
    }
  }
  confirm1 =()=>{
    this.props.history.push('/input')
}
  render() { 
    return (
      <div>

        <div><Header items={['讨论', '导航', '书柜', '成员', '活动', '发现']}
          confirm={this.confirm} ></Header>
        </div>

        <div className="cpo-tabs">
          <Tab items={['好文万花筒']}
            color="black"
            selectColor="rgb(27, 224, 238)"
            onClick={this.onClick}></Tab>
        </div>
        <div className="cpo-content">
            <div className="cpo-middle">
            <div className="diss-sub1" >
                <Data artical={this.state.artical}/>
            </div>
            </div>
            <div className="cpo-left">
                  <p className="cpo-todos-tips" >
                    <img style={{marginLeft:'3rem'}} src={teacher} alt="老师" /><br />
                    Hello! {sessionStorage.getItem("username")}:
                    <br />找准方向，陈老师让你学的，学了多少了？
                  </p>
                  <Todos></Todos>
            </div>
            <div className="cpo-right">
              <div className="cpo-showing">
                    <Carousel autoplay autoplaySpeed={3000}>
                      <div>
                      <img src={spring} alt="autumn" style={{ width: '30rem', height: '30rem' }} />
                      </div>
                      <div>
                      <img src={autumn} alt="spring" style={{ width: '30rem', height: '30rem' }} />
                      </div>
                    </Carousel>
              </div>
                  <button onClick={this.confirm1} className="diss-button" style={{marginTop:'1rem'}}>推荐&撰写</button>
            </div>
        </div>
        )
        <Footer></Footer>
      </div>
    )
  }
}









